var pinpai;
$.ajax({
	type:"get",
	url:"js/pinpai.json",
	async:false,
	success:function(barand){
		pinpai=barand;		
	}
})
var bar=pinpai.list;

$(bar).each(function(ind,pin){//循环  （下标   名称）
	 var a=$("<a/>");//创建个a标签
	 $(a).appendTo($(".pinpai"));//吧a标签放在class名为pinpai的div下
	console.log	(a)//输出a
	$(a).css({"height":"355px","width":"280px","background":"#cecece","display":"block","float":"left","margin":"10px 10px","overflow":"hidden","position":"relative"});//a标签css样式
	var div1=$("<div/>");//创建个div
	$(div1).css({"height":"280px","width":"280px","position":"relative","overflow":"hidden"})//这个divcss样式
	$(div1).appendTo(a)//吧div放在a标签里
	var img=$("<img/>");//创建个img
	img.attr({//img的样式
		"src":"img/"+pin.img,//路径=图片路径+josn里的img    pin为在遍历each中
	})
	$(img).appendTo(div1); //img放到创建的div1里
	$(img).css({"position":"absolute","height":"280px","width":"280px"})//img的样式
	var img2=$("<img/>")//没做
	var span=$("<span/>");//没做
	img2.attr({//没做
		"src":"img/"+pin.ximg,//没做
	})
	$(img2).appendTo(span)//没做
	$(span).appendTo(a);//没做
	$(span).css({"width":"280px","height":"50px","display":"block","text-align":"center"})//没做
	$(img2).css({"padding-top":"5px"});//没做
	var p=$("<p/>");//创建个P标签
	p.html(pin.pice)//p标签里内容显示为pin+json的pice
	$(p).appendTo(a);//p放在标签a里
	$(p).css({"text-align":"center","font-size":"12px","color":"#fafafa"})//p的css样式
	$(img[0]).mouseover(function(){//img【0】也就是所有的img鼠标划过时执行一次放大效果
		$(img[0]).stop().animate({
			"width":300,
			"height":300,"top":-5,"left":-10
		},800)
	})
		$(img[0]).mouseout(function(){//img【0】也就是所有的img鼠标划过时执行一次回缩效果，也就是原来的样式
		$(img[0]).stop().animate({
			"width":280,
			"height":280,"top":0,"left":0
		},800)
	})
	
})





